<template>
  <div class="login-container">
    <!-- 标题部分 -->
    <div class="app-title">贴吧爬虫可视化</div>

    <!-- 登录卡片 -->
    <a-card class="login-card" title="用户登录" bordered>
      <a-form :model="form" layout="vertical" @finish="onSubmit">
        <a-form-item
            label="用户名"
            name="username"
            :rules="[{ required: true, message: '请输入用户名' }]"
        >
          <a-input
              v-model:value="form.username"
              placeholder="请输入用户名"
          />
        </a-form-item>
        <a-form-item
            label="密码"
            name="password"
            :rules="[{ required: true, message: '请输入密码' }]"
        >
          <a-input-password
              v-model:value="form.password"
              placeholder="请输入密码"
          />
        </a-form-item>
        <a-form-item>
          <a-button
              type="primary"
              html-type="submit"
              class="login-button"
          >
            登录
          </a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script lang="ts">
import {defineComponent, reactive} from "vue";
import {login} from '@/api/api.ts'; // 引入登录 API
import {useRouter} from "vue-router"; // 导入 Vue Router
import {message} from "ant-design-vue";

export default defineComponent({
  name: "LoginView",
  setup() {
    const router = useRouter(); // 初始化 Router
    const form = reactive({
      username: "",
      password: "",
    });

    const onSubmit = async () => {
      try {
        const response = await login(form);
        message.success('登录成功！');
        console.log('登录成功:', response);
        localStorage.setItem('token', response.token); // 存储 Token
        router.push('/home'); // 跳转到首页
      } catch (error) {
        console.error('登录失败:', error);
      }
    };

    return {
      form,
      onSubmit,
    };
  },
});
</script>

<style scoped>
.login-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #a8edea, #fed6e3); /* 渐变背景 */
}

.app-title {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px; /* 与卡片部分的间距 */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.login-card {
  width: 400px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 提升卡片质感 */
  border-radius: 12px;
}

.login-card .ant-card-head-title {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}

.login-button {
  width: 100%;
  height: 40px;
  font-size: 16px;
  border-radius: 8px;
}

.ant-input,
.ant-input-password {
  height: 40px;
  font-size: 14px;
}

.ant-card {
  background-color: #ffffff;
  border-radius: 12px;
  border: none;
}

.ant-form-item-label > label {
  font-weight: 600;
  color: #333;
}
</style>
